window.addEventListener("load", function () {
	//功能一:海量API移入效果
	//思路:
	//1.获取相关节点
	//2.给li绑定移入移除事件
	let oldUrl = ""; //变量提升
	$(".api-list li").forEach(function (v) {
		//2-1.移入事件
		v.addEventListener("mouseover", function () {
			//2-1-1.改变背景色
			this.style.background = "#2f7ee9";
			//2-1-2.改变字体色
			this.style.color = "#fff";
			//2-1-3.动画效果
			this.style.transition = "all 2s";
			//2-1-4.切换透明图片
			// 将图片的后缀名加一个-c
			let imgUrl = this.firstElementChild.src;
			let str = imgUrl.slice(imgUrl.lastIndexOf(".")); //动态获取后缀名
			this.firstElementChild.src = imgUrl.replace(str, "-c.svg");
			oldUrl = imgUrl; //用一个变量保存原先路经
		});
		//3.移除事件
		v.addEventListener("mouseout", function (v) {
			//3-1.变回原背景色
			this.style.background = "#fff";
			//3-2.变回原字体色
			this.style.color = "#000";
			//3-3.变回原背景图路径
			this.firstElementChild.src = oldUrl;
		});
	});
	//功能二
	// 独角兽区轮播图
	//思路 将多个图文结构bh叠在一起,每隔三秒让其中一个显示,其他不显示
	//1.获取相关节点
	// $(".bh")
	const bhNode = $(".bh");
	bhNode[0].style.opacity = "1"; //默认显示第0个
	let index = 0;
	//2.设置周期定时器,每隔三秒显示
	this.window.setInterval(function () {
		//3.排他思想,不管当前谁显示,每一个周期先让所有的消失
		bhNode.forEach(function (v) {
			v.style.opacity = "0";
		});
		//4.通过索引显示对应内容,其他不显示
		bhNode[index].style.opacity = "1";
		bhNode[index].style.transition = "all 1s";
		//5.设置索引变量,每隔一个周期就++
		index++;
		//6.当索引达到最大限度时,回复初始状态
		if (index > bhNode.length - 1) {
			index = 0;
		}
	}, 3000);
	//功能三 回到顶部
	//1.获取相关节点
	// console.log($(".bto"));
	const btoNode = $(".bto");
	//2.给图标绑定点击事件,点击时滚动条滚动到顶部
	btoNode.addEventListener("click", function () {
		let y = window.scrollTo({
			top: 0,
			behavior: "smooth",
		});
	});
	//3.刚开始不显示,滚动到指定位置时显示
	window.onscroll = function () {
		if (window.scrollY >= 900) {
			btoNode.style.opacity = "1";
			btoNode.style.transition = "all 1s";
			btoNode.style.transform = "rotateY(720deg)";
		} else {
			btoNode.style.opacity = "0";
			btoNode.style.transform = "rotateY(0)";
		}
	};
	// 轮播图
	var mySwiper = new Swiper(".swiper", {
		speed: 1000,
		autoplay: {
			delay: 1000,
		}, //可选选项，自动滑动

		pagination: {
			el: ".swiper-pagination",
			clickable: true,
			renderBullet: function (index, className) {
				switch (index) {
					case 0:
						text = "壹";
						break;
					case 1:
						text = "贰";
						break;
					case 2:
						text = "叁";
						break;
					case 3:
						text = "肆";
						break;
					case 4:
						text = "伍";
						break;
				}
				return '<span class="' + className + '">' + text + "</span>";
			},
		},
	});
});
